<style>
    ul{list-style: none;padding: 0px;}
    .banner-list li{
        width: 40%;
        padding: 8px;
        border: 1px solid #3E3E3E;
        border-radius: 12px;
        margin-bottom:12px; 
        position: relative;
    }
    .banner-list li:hover{
        border: 1px solid #F36A5A;
    }
    .banner-list .sort{
        font-size: 32px;
    }
    .banner-list .sort input{
        display: inline-block;
        width: 40px;
        border: 1px solid #3E3E3E;
        background-color: transparent;
    }
    .banner-list li:hover .sort{
        color: #F36A5A;
    }
    .banner-list li:hover input{
        border: 1px solid #F36A5A;
    }
    .banner-list li img{
        width: 80%;
        height: 100px;
    }
    .banner-list li .glyphicon-remove{
        position: absolute;
        font-size: 24px;
        right: -12px;
        top:-9px;
        cursor: pointer;
    }
    .banner-list li a{
        color: #3E3E3E;
    }
    .banner-list li:hover a{
        color: #F36A5A;
    }
</style>
<div class="header"> 
    <h1 class="page-header">
        banner设置
    </h1>
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li class="active"><a href="#">banner设置</a></li>
    </ol> 

</div>
<div id="page-inner">
    <!-- 内容开始 -->
    <div class="row">

        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                banner列表
                </div> 
                <div class="panel-body"> 
                    <ul class="banner-list">        
                        <?php foreach($bannerList as $k=>$v){ ?>
                        <li>
                            <span class="sort">{$v['sort']}</span>
                            <input type="hidden" name="id" value="{$v['id']}">
                            <input type="hidden" name="sort" value="{$v['sort']}">
                            <img src="{$v['imgurl']}" alt="">
                            <a href="<?php echo U('index/del',array('id'=>$v['id'])); ?>"><i class="glyphicon glyphicon-remove"></i></a>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
        </div>                      
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">上传图片</div>
                    </div>
                </div>
                <div class="panel-body">
                    <form method="post" action="{:U('Index/upload_banner')}" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>设置级数</label>
                            <input class="form-control" placeholder="级数越大显示越前面" type="number" min="0" name="sort">
                        </div>
                        <div class="form-group">
                            <label>上传图片</label>
                            <input type="file" name="imgurl">
                            <p class="help-block">上传图片小于2M（格式为jpg, gif, png, jpeg）</p>
                        </div>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容结束 -->

</div>
<!-- /. PAGE INNER  -->
<script>
    $(function(){

    })
</script>